<template>
  <div class="daily-question-card bg-white rounded-lg shadow-md border border-gray-200 p-4">
    <!-- 标题区域 -->
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center space-x-2">
        <div class="w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
          <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <h3 class="text-base font-semibold text-gray-900">每日一题</h3>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-xs text-gray-500">{{ formatDate(dailyQuestion?.date) }}</span>
        <div v-if="dailyQuestion?.is_solved" class="flex items-center space-x-1">
          <svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 8zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
          <span class="text-xs text-green-600 font-medium">已解决</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="flex items-center justify-center py-6">
      <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="text-center py-6">
      <div class="text-red-500 mb-2">
        <svg class="w-8 h-8 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
        <p class="text-sm text-gray-600">{{ error }}</p>
        <button 
          @click="fetchDailyQuestion"
          class="mt-2 px-3 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
        >
          重试
        </button>
      </div>
    </div>

    <!-- 每日一题内容 -->
    <div v-else-if="dailyQuestion" class="space-y-3">
      <!-- 题目信息 -->
      <div class="border-l-4 border-blue-500 pl-3">
        <h4 class="text-base font-medium text-gray-900 mb-2">
          {{ dailyQuestion.question.title }}
        </h4>
        <div class="flex items-center space-x-3 text-xs text-gray-600">
          <span class="flex items-center space-x-1">
            <span class="w-2 h-2 rounded-full" :class="getDifficultyColor(dailyQuestion.question.difficulty)"></span>
            <span>{{ dailyQuestion.question.difficulty }}</span>
          </span>
          <span>尝试: {{ dailyQuestion.attempt_count }}</span>
          <span v-if="dailyQuestion.solved_at">
            已解决
          </span>
        </div>
      </div>

      <!-- 题目描述 -->
      <div class="text-gray-700 text-xs line-clamp-2">
        {{ dailyQuestion.question.description || dailyQuestion.question.content }}
      </div>

      <!-- 标签 -->
      <div v-if="dailyQuestion.question.tags.length > 0" class="flex flex-wrap gap-1">
        <span 
          v-for="tag in dailyQuestion.question.tags.slice(0, 3)" 
          :key="tag.id"
          class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
        >
          {{ tag.name }}
        </span>
        <span v-if="dailyQuestion.question.tags.length > 3" class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
          +{{ dailyQuestion.question.tags.length - 3 }}
        </span>
      </div>

      <!-- 操作按钮 -->
      <div class="flex items-center justify-between pt-3 border-t border-gray-200">
        <div class="flex items-center space-x-2">
          <button 
            @click="goToQuestion"
            class="px-3 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
          >
            开始做题
          </button>
          <button 
            @click="viewHistory"
            class="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
          >
            历史
          </button>
        </div>
        
        <!-- 统计信息 -->
        <div class="text-xs text-gray-500">
          <span>解决率: {{ Math.round(dailyQuestion.question.acceptance_rate * 100) }}%</span>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="text-center py-6">
      <div class="text-gray-400 mb-3">
        <svg class="w-12 h-12 mx-auto mb-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
        </svg>
        <h3 class="text-base font-medium text-gray-900 mb-1">暂无每日一题</h3>
        <p class="text-sm text-gray-600 mb-3">今天还没有生成每日一题</p>
        <button 
          @click="fetchDailyQuestion"
          class="px-3 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
        >
          刷新
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getTodayDailyQuestion, type DailyQuestionResponse } from '@/api/dailyQuestion'

const router = useRouter()

// 响应式数据
const dailyQuestion = ref<DailyQuestionResponse | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)

// 获取每日一题
const fetchDailyQuestion = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await getTodayDailyQuestion()
    if (response) {
      dailyQuestion.value = response
    } else {
      dailyQuestion.value = null
    }
  } catch (err: any) {
    error.value = err.message || '获取每日一题失败'
    console.error('获取每日一题失败:', err)
  } finally {
    loading.value = false
  }
}

// 跳转到题目详情页
const goToQuestion = () => {
  if (dailyQuestion.value) {
    router.push(`/questions/${dailyQuestion.value.question.slug}`)
  }
}

// 查看历史记录
const viewHistory = () => {
  router.push('/daily-question/history')
}

// 格式化日期
const formatDate = (dateString?: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 格式化日期时间
const formatDateTime = (dateString?: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 获取难度颜色
const getDifficultyColor = (difficulty: string) => {
  switch (difficulty) {
    case 'Easy':
      return 'bg-green-500'
    case 'Medium':
      return 'bg-yellow-500'
    case 'Hard':
      return 'bg-red-500'
    default:
      return 'bg-gray-500'
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDailyQuestion()
})
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
